@import (reference) 'src/style/mixins';

.rating-list-item-favorite {
  align-items: center;
  display: flex;
  height: 48px;
  justify-content: center;
  position: relative;
  width: 48px;

  &__input {
    display: none;
  }

  &__label {
    bottom: 8px;
    cursor: pointer;
    display: inline-block;
    font-size: 32px;
    left: 8px;
    line-height: 0;
    opacity: 1;
    position: absolute;
    right: 8px;
    top: 8px;
    transition: opacity @animation;

    &_off {
      .html_light & {
        color: @c-warning-8;
      }

      .html_dark & {
        color: @c-warning-1;
      }
    }

    &_on {
      .html_light & {
        color: @c-warning-7;
      }

      .html_dark & {
        color: @c-warning-2;
      }
    }
  }

  &__input:checked ~ &__label_off {
    opacity: 0;
  }

  &__input:not(:checked) ~ &__label_on {
    opacity: 0;
  }
}
